<template>
    <popup
        ref="popupRef"
        :title="popupTitle"
        :async="true"
        width="550px"
        @confirm="handleSubmit"
        @close="handleClose">
        
        
        <template v-slot:default>
            <el-form
                ref="formRef"
                :rules="rules"
                :model="formData"
                label-width="60px">
                
                
                <el-form-item label="名称" prop="name">
                    <el-input
                        v-model="formData.name"
                        placeholder="请输入名称"
                        clearable
                    />
                </el-form-item>
                
                <el-form-item label="备注" prop="remark">
                    <el-input
                        v-model="formData.remark"
                        type="textarea"
                        :autosize="{ minRows: 4, maxRows: 6 }"
                        placeholder="请输入备注"
                        maxlength="200"
                        show-word-limit
                    />
                </el-form-item>
                
                <el-form-item
                    label="排序"
                    prop="sort"
                >
                    <el-input-number v-model="formData.sort"/>
                </el-form-item>
                
                <el-form-item label="状态" prop="sort">
                    <el-radio-group v-model="formData.isDisable">
                        <el-radio :label="0">正常</el-radio>
                        <el-radio :label="1">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
            
            </el-form>
        
        
        </template>
    
    
    </popup>
</template>
<script lang="ts" setup>

import Popup from "@/components/popup/index.vue"
import {FormInstance} from "element-plus";
import feedback from "@/utils/feedback";
import {roleAdd, roleDetail, roleEdit} from "@/api/system/SystemAuthRoleController";

const popupRef = shallowRef<InstanceType<typeof Popup>>()
const formRef = shallowRef<FormInstance>()

const mode = ref('add')
const popupTitle = computed(() => {
    return mode.value == 'edit' ? '编辑角色' : '新增角色'
})

/**
 * 定义数据
 */
const formData = reactive({
    id: '',
    name: '',
    remark: '',
    sort: 0,
    isDisable: 0,
    menus: []
})

/**
 * 确认按钮
 */
const emit = defineEmits(['success', 'close'])

async function handleSubmit() {
    await formRef.value?.validate()
    const params = {...formData, menuIds: formData.menus.join()}
    
    if (mode.value === "add") {
        await roleAdd(params)
    } else {
        await roleEdit(params)
    }
    
    popupRef.value?.close()
    feedback.msgSuccess('操作成功')
    emit('success')
}

/**
 * 取消按钮
 */
function handleClose() {
    emit('close')
}


function open(type = 'add') {
    mode.value = type
    popupRef.value?.open()
}


/**
 * 编辑页面回写
 *
 * @param row
 */
async function setFormData(row: Record<any, any>) {
    const data = await roleDetail({id: row.id})
    for (const key in formData) {
        if (!!data[key]) {
            //@ts-ignore
            formData[key] = data[key]
        }
    }
}

defineExpose({
    open,
    setFormData
})

/**
 * 规则
 */
const rules = {
    name: [
        {
            required: true,
            message: '请输入名称',
            trigger: ['blur']
        }
    ]
}


</script>
